(function (Vue) {


	var STORAGE_KEY = "items-vuejs";

	const itemStorage = {
		// 获取本地数据
		fetch() {
			return JSON.parse(localStorage.getItem(STORAGE_KEY) || '[]');
		},

		// 保存数据到本地
		save(items) {
			localStorage.setItem(STORAGE_KEY, JSON.stringify(items));
		}
	};


	Vue.directive('app-focus', {
		// 当被绑定的元素插入到 DOM 中时……
		inserted: function (el) {
			// 聚焦元素
			el.focus()
		}
	});


	const items = [];

	var app = new Vue({
		el: '#todoapp',
		data: {
			items: itemStorage.fetch(),
			// 用来标记 存储当前 双击的数据
			currentItem: null,
			// 用来表示当前的路径参数
			filterStatus: "all"
		},
		watch: {
			items: {
				handler: function (val, oldVal) {
					itemStorage.save(val)
				},
				deep: true
			}
		},
		methods: {
			// 回撤按键事件
			addItem(event) {
				const content = event.target.value.trim()
				//2. 判断数据如果为空，则什么都不做
				if (!content.length) {
					return
				}

				this.items.push({
					id: this.items.length + 1,
					content: content,
					completed: false // 是否完成
				})

				event.target.value = '';
			},
			// 删除数据
			removeItem(itemId) {
				this.items = this.items.filter((item) => {
					return item.id != itemId;

				});

			},
			// 清除所有已完成的数据
			removeCompleted() {
				this.items = this.items.filter(item => {
					return !item.completed
				})
			},
			// 双击编辑
			toEdit(item) {
				this.currentItem = item;
			},
			// 取消编辑
			cancelEdit() {
				this.currentItem = null;
			},
			// 编辑保存数据，是更新之前的数据并不是添加新的数据，如果修改的内容为null则，删除当前元素
			finishEdit(item, index, event) {
				const conteng = event.target.value.trim();
				if (!conteng) {
					this.removeItem(item.id);
					return;
				}
				//  更新数据
				item.content = conteng;

				// 取消编辑的状态
				this.currentItem = null;
			}
		},
		computed: {
			// 计算所有未完成的数量
			remaining() {
				return this.items.filter(item => !item.completed).length;
			},
			toggleAll: {
				get() {

					return this.remaining === 0;
				},
				set(newVlaue) {
					this.items.forEach(item => {
						item.completed = newVlaue;
					})
				}
			},

			// 查询过滤数据
			filterItems() {

				switch (this.filterStatus) {
					case "completed":
						return this.items.filter(item => {
							return item.completed;
						});
						break;
					case "active":
						return this.items.filter(item => {
							return !item.completed;
						});
						break;
					default:
						return this.items;
				}
			}

		},
		directives: {
			'todo-focus': {

				// 每当指令的值更新后，会调用此函数
				update(el, binding) {
					el.focus();
				}


			}
		}
	});


	// 监听路径参数是否发生变化，就是访问路径是否发生变化
	window.onhashchange = function () {
		console.log('路径发生变化')
		const hash = window.location.hash.substr(2) || "all";
		app.filterStatus = hash;
	}
	// 自调用
	window.onhashchange();


})(Vue);
